<template>
  <card-component :content-title="contentTitle"
                  :page="page"
                  @handleSizeChange="handleSizeChange"
                  @handleCurrentChange="handleCurrentChange">

    <table-component slot="table"
                     :table-header="tableHeader"
                     :table-data="tableData"
                     @handleEdit="handleEdit"
                     @handleChange="handleChange"
                     @handleDelete="handleDelete"
                     @handleClear="handleClear"></table-component>

    <remark-dialog
      slot="dialog"
      :dialogVisible="dialogVisible"
      :formData="formData"
      :rowIndex="rowIndex"
      @cancelDialog="cancelDialog"
      @confrimDialog="confrimDialog"
    ></remark-dialog>


    <clear-dialog
      slot="dialog"
      :dialogVisible="clearDialogVisible"
      :formData="formData"
      :rowIndex="rowIndex"
      @cancelClearDialog="cancelClearDialog"
      @confrimClearDialog="confrimClearDialog"></clear-dialog>


  </card-component>

</template>

<script>


  import card from '@/base/card.vue'
  import table from '@/base/AutoWidthTable.vue'
  import request from '@/common/js/request'
  import remarkDialog from '@/base/counterConfigDialog.vue'
  import clearDialog from '@/base/clearCofirmDialog.vue'
  import util from '@/common/js/util'

  export default {
    data() {
      return {
        chanxian: '',
        contentTitle:this.$getTextByLangKey('计数器配置'),
        tableHeader: [],
        tableData: [],
        page: {
          currentPage: 1,
          total: 0,
          pageSize: 20,
        },


        clearDialogVisible:false,
        dialogVisible: false,
        formData: {
          mac: '',//计数器编码
          note: '',//备注
          boardNum: 0,//计数器拼板数
        },
        rowIndex: 0,

        timerUpdateCountNum:{
          index:null,
          timer:null
        }
      }
    },
    created: function () {

      this.fetchData()
    },

    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    },

    methods: {
      fetchData: function () {

        this.requestCouterConfig()
      },

      cancelClearDialog: function () {
        this.clearDialogVisible = false;
      },
      confrimClearDialog: function (val, index) {
        this.clearDialogVisible = false;

//        let data = {mac: val.mac,  lineName: val.lineName}

        request.requestRollbackCounter(val.mac,val.lineName, res => {

          console.log('requestRollbackCounter')
          console.log(res)
          this.requestCouterConfig()
          util.showSuccessToast(this.$getTextByLangKey('置零成功'))
        })
      },

      cancelDialog: function () {
        this.dialogVisible = false;
      },
      confrimDialog: function (val, index) {
        this.dialogVisible = false;

        let data = {id: val.id, mac: val.mac, boardNum: val.boardNum, note: val.note, lineName: val.lineName}

        request.requestUpdateCouterConfig(data, res => {

          this.requestCouterConfig()
          util.showSuccessToast(this.$getTextByLangKey('修改成功'))
        })

      },

      destroyed: function () {

        //启动自动刷新的线程，threadOpen = false
        console.log('destroyed')
      },

      requestCouterConfig() {


        request.requestCouterConfig(res => {
          console.log(res.data.data.counterConfig)
          this.tableHeader = this.makeHeader(res.data.data.headers)
          this.tableData = this.makeList(res.data.data.counterConfig)
        })
      },
      handleEdit: function (index, row) {

        this.dialogVisible = true
        this.formData = util.deepCopy(row)
        this.rowIndex = index
      },

      handleClear: function (index, row) {
        this.clearDialogVisible  = true
        this.formData = util.deepCopy(row)
        this.rowIndex= index
      },
      handleDelete: function (index, row) {
        this.$emit('handleDelete', index, row)
      },

      handleChangeWithTimer: function (index,row){
        console.log('handleChangeWithTimer 1')
        if(index === this.timerUpdateCountNum.index){
          if(this.timerUpdateCountNum.timer){
            clearTimeout(this.timerUpdateCountNum.timer)
          }
          this.timerUpdateCountNum.timer = setTimeout(()=>{
            request.requestUpdateCountNum({
              lineName:row.lineName,
              mac:row.mac,
              currentValue:row.currentValue
            },res=>{
              console.log('requestUpdateCountNum',res)
            })
          },800)
        }else{
          this.timerUpdateCountNum.index = index
          this.timerUpdateCountNum.timer = setTimeout(()=>{
            request.requestUpdateCountNum({
              lineName:row.lineName,
              mac:row.mac,
              currentValue:row.currentValue
            },res=>{
              console.log('requestUpdateCountNum',res)
            })
          },1800)
        }
      },
      handleChange: function (key,index, row) {
        this.handleChangeWithTimer(index,row)

        console.log('handleChange', key,index, row)
      },
      rowClick: function (row, event, column) {
      },
      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },

      handleCurrentChange: function (val) {
        this.page.currentPage = val
      },

      makeHeader: function (list) {

        let indexItem = {
          type: 'index', isShow: true,
          width: '65', label: 'NO.',
        }

        let actionItem = {type: "action", label: this.$getTextByLangKey('操作'), isShow: true}
//        let selectionItem = {
//          type: 'selection', isShow: true
//        }
        var header = [indexItem]
        list.forEach(function (item) {
          item.isShow = true
          if(item.prop === 'currentValue'){
            item.type = 'number-input'
            item.width = '150'
          }
          header.push(item)
        }, this)

        header.push(actionItem)
        return header
      },


      makeList: function (list) {
        var data = []
        list.forEach(function (item) {
          item.updateTime = this.getTimeToDate(item.updateTime)
          item.action = 'edit clear'
          data.push(item)
        }, this)
        return data

      },

      getTimeToDate: function (time) {

        if (time != null) {
          var date = new Date(time)
          return date.toLocaleDateString() + ' ' + date.toTimeString().split(' ')[0]
        }

        return ''

      },

    },
    components: {
      'card-component': card,
      'table-component': table,
      'remark-dialog': remarkDialog,
      'clear-dialog':clearDialog
    },

  }
</script>


<style scoped>
  .el-card {
    box-shadow: 0 0;
    border-radius: 0;
    border: none;
  }
</style>


